<template>
	<view class="content">
		<view class="" :style="'height:'+(statusHeight)+'px;'"></view>
		<view class="" style="font-size: 32rpx;font-weight: 700;color: #333;display: flex;align-items: center;"
			:style="'height:'+(bottomHeight)+'px;'">
			线上名医
		</view>
		<view class="top_view flex" @click="go_seach">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/seach_icon.png" class="top_view_icon"
				mode=""></image>
			<input type="text" class="top_view_input" disabled password="请输入药品或医生名称">
			<view class="top_view_input_right">
				搜索
			</view>
		</view>
		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<image :src="ImgUrl + item.img" class="swiper_img" mode=""></image>
			</swiper-item>
		</swiper>
		<template v-if="showAi">
			<view class="card1 flex">
				<view class="card1_item flex1" @click="go_FindAnAxpert">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/card_icon1.png"
						class="card1_item_left" mode=""></image>
					<view class="card1_item_right">
						专家会诊
					</view>
				</view>
				<view class="card1_item flex1" @click="go_followWithInterest">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/card_icon2.png"
						class="card1_item_left" mode=""></image>
					<view class="card1_item_right">
						关注医生
					</view>
				</view>
			</view>
			<view>
				<swiper class="swiper-box1" :indicator-dots="true" :autoplay="false" :interval="3000" :duration="1000" mode="round">
					<swiper-item v-for="(item,index) in iconList" :key="index">
						<view class="siwperBlock">
							<view v-for="(jtem, jndex) in item.children" :key="jndex" class="siwperBlockItem" @click="handleLink(jtem)">
								<image :src="jtem.icon" style="width: 104rpx;height: 72rpx;"></image>
								<view class="iconFont">{{ jtem.title }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<scroll-view @scrolltolower="scrolltolower" scroll-y="true" class="scroll" :style="{height:scrollH+'px'}">
				<view class="list">
					<view v-for="(item,index) in doctorList" :key="index">
						<doctor-item :item="item"></doctor-item>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="">
				<view class="" style="font-size: 30rpx;color: #DC3428;margin-left: 24rpx;margin-top: 30rpx;">
					新闻咨询
				</view>
				<view v-for="(item,index) in newsList1" @click="clickNewsList(item)" class="" style="display: flex;align-items: center;justify-content: space-between;margin: 0 24rpx;margin-bottom: 20rpx;">
					<view class="" style="font-size: 0;margin-right: 14rpx;">
						<image style="width: 172rpx;height: 136rpx;" :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="" style="flex: 1;height: 136rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view class="" style="font-size: 28rpx;color: #987457;">
							{{item.title}}
						</view>
						<view class="" style="font-size: 22rpx;color: #BDBDBD;text-align: right;">
							{{item.time}}
						</view>
					</view>
				</view>
				<view v-for="(item,index) in newsList2" @click="clickNewsList(item)" class="" style="display: flex;align-items: center;justify-content: space-between;margin: 0 24rpx;margin-bottom: 20rpx;">
					<view class="" style="font-size: 0;margin-right: 14rpx;">
						<image style="width: 172rpx;height: 136rpx;" :src="item.img" mode="aspectFill"></image>
					</view>
					<view class="" style="flex: 1;height: 136rpx;display: flex;flex-direction: column;justify-content: space-between;">
						<view class="" style="font-size: 28rpx;color: #987457;">
							{{item.title}}
						</view>
						<view class="" style="font-size: 22rpx;color: #BDBDBD;text-align: right;">
							{{item.time}}
						</view>
					</view>
				</view>
			</view>
		</template>
		<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/ask.png" class="askImg" @click="handleClickAsk"></image>
		<u-popup :show="askPop" @close="handleclose" :round="20" zIndex="1000000000000000000000">
			<view>
				<view class="askItem" style="padding-top: 60rpx;">
					<u-icon name="phone" color="#0165FB" size="22"></u-icon>
					<view class="askItemFont">急速预约</view>
				</view>
				<u-divider style="margin: 60rpx 0;"></u-divider>
				<view class="askItem" style="padding-bottom: 60rpx;" @click="handleClickKefu">
					<u-icon name="kefu-ermai" color="#0165FB" size="22"></u-icon>
					<view>在线客服</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import getScrollHeight from "@/utils/utils.js" //获取余下的高度
	import {
		banner,
		doctor
	} from '../../api/login.js';
	import doctorItem from '@/components/doctor-item.vue';
	import tim from '@/utils/tim.js'
	export default {
		components: {
			doctorItem
		},
		data() {
			return {
				newsList1:[
					{
						img:'https://i2.chinanews.com.cn/simg/cmshd/2024/03/11/03b815419ea84daaa78ac7c6b1c7bc83.jpg',
						title:'二月二龙抬头，开启一年好兆头',
						time:'2024年03月10日',
						desc:'今天是农历二月初二，是“龙抬头”的日子，“龙抬头”其实指的是“青龙”七星开始出现在东方，此时万物萌发，焕然一新，春天悄然而至，让我们一起等春暖，待花开。龙抬头日，祝你新的一年鸿运当头。'
					},
				],
				newsList2:[{
					img:'https://i2.chinanews.com.cn/simg/cmshd/2024/03/10/dedcbaa5b74e4fa4b0b5101c981002ba.jpg',
					title:'九幅“字画像”读懂2024全国两会热话题',
					time:'2024年03月10日',
					desc:'两会热词”折射着民声民意，反映着人民群众对美好生活的向往和憧憬，承载着老百姓对各项工作的期待与希冀，我们尝试以字入画，通过九个汉字的漫画像，梳理全国两会报道中的热词。',
				}],
				title: '',
				scrollH: '',
				count: 5,
				banners: [],
				value: 4,
				doctorList: [],
				iconList: [
					{
						children: [
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/peizhen.png',
								link: 'peizhen',
								title: '陪诊',
								sx: 'pz'
							},
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/VIP.png',
								link: 'vipCustomized',
								title: 'VIP定制',
								sx: 'vip'
							},
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/daiban.png',
								link: 'agencyService',
								title: '代办服务',
								sx: 'db'
							},
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/peihu.png',
								link: 'peiList',
								title: '陪护',
								sx: 'ph'
							},
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/yingxiang.png',
								link: 'vedioList',
								title: '影像服务',
								sx: 'yx'
							}
						]
					},
					{
						children: [
							{
								icon: 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/shengwai.png',
								link: 'shengwai',
								title: '省外陪诊'
							}
						]
					}
				],
				page: 1,
				last_page: '',
				statusHeight: 0, //状态栏高度
				bottomHeight: 0, //导航栏高度
				askPop: false
			}
		},
		computed: {
			ImgUrl() {
				return this.$store.state.ImgUrl
			},
			showAi() {
				return this.$store.state.config.showAi
			}
		},
		onLoad() {
			let statusInfo = uni.getSystemInfoSync();
			this.statusHeight = statusInfo.statusBarHeight;
			let bottomInfo = uni.getMenuButtonBoundingClientRect();
			this.bottomHeight = (bottomInfo.top - this.statusHeight) * 2 + bottomInfo.height;
		},
		onShareTimeline(){
			
		},
		onShareAppMessage(){
			
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('scroll').then(res => {
				t.scrollH = res - 10
			})
		},
		onShow() {
			this.getBanner();
			this.getDoctor();
			// this.loginTM()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getDoctor();
		},
		methods: {
			loginTM() {
				let userinfo = uni.getStorageSync('userinfo')
				if (!userinfo.id) return
				const userId = String(userinfo.id)
				console.log(userId)
				let res = tim.genTestUserSig(userId)
				// let promise = this.$tim.login({
				// 	userID: userId,
				// 	userSig: res.userSig
				// });
				// promise.then((res) => {
				// 	console.log('登录成功')
				// 	//登录成功后 更新登录状态
				// 	// this.$store.commit("toggleIsLogin", true);
				// 	// //自己平台的用户基础信息
				// 	// uni.setStorageSync('userInfo', JSON.stringify(userInfo))
				// 	// //tim 返回的用户信息
				// 	// uni.setStorageSync('userTIMInfo', JSON.stringify(res.data))
				// 	// uni.reLaunch({
				// 	// 	url: '../tim/record'
				// 	// })
				// }).catch((err) => {
				// 	console.warn('login error:', err); // 登录失败的相关信息
				// });
				// console.log(this.$TUICallKit.init,'12');
				// res = tim.genTestUserSig(userId)
				this.$TUICallKit.init({
					sdkAppID: 1600011248,
					userID: userId,
					userSig: res.userSig,
				}).then(res => {
					// uni.showModal({
					// 	title:'success'
					// })
					this.$TUICallKit.setSelfInfo({
						nickName: userinfo.name,
						avatar: this.ImgUrl + userinfo.avatar
					});
				}).catch(res => {
					// console.log(res,'123');
				})

			},
			scrolltolower(e) {
				if (this.page < parseInt(this.last_page)) {
					this.page++
					this.getDoctor();
				}
			},
			getDoctor() {
				let t = this;
				doctor({
					page:this.page
				}).then(res => {
					if (res.code === 200001) {
						t.last_page = res.data.last_page;
						if(t.page==1){
							t.doctorList = res.data.data;
						}else{
							let arr = [];
							if(res.data.data.length>0){
								t.doctorList.push(...res.data.data)
							}else{
								t.page--;
							}
						}
					}
					uni.stopPullDownRefresh();
				}).catch(err => {
					console.log(err, '==err')
				})
			},
			getBanner() {
				banner({
					to: 'user_index'
				}).then(res => {
					if (res.code === 200001) {
						this.banners = res.data.data;
					}
				}).catch(err => {
					console.log(err, '==err')
				})
			},
			go_seach() {
				uni.navigateTo({
					url: '/subPages/Seach/Seach'
				})
			},
			go_FindAnAxpert() {
				uni.navigateTo({
					url: '/pages/FindAnAxpert/FindAnAxpert'
				})
			},
			go_followWithInterest() {
				uni.navigateTo({
					url: '/pages/FollowWithInterest/FollowWithInterest'
				})
			},
			handleLink(link) {
				uni.setStorageSync('indexType', link)
				uni.navigateTo({
					url: `/pages/${link.link}/${link.link}`
				})
			},
			handleClickAsk() {
				this.askPop = true
			},
			handleclose() {
				this.askPop = false
			},
			handleClickKefu() {
				uni.navigateTo({
					url: '/pages/kefu/kefu'
				})
			}
		}
	}
</script>

<style>
	page {
		background: linear-gradient(198deg, #EFF5FF 19.23%, #F4F4F4 24%);
	}

	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.top_view {
		width: 100%;
		height: 76rpx;
		border-radius: 40rpx;
		background: #FFF;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.top_view_icon {
		width: 44rpx;
		height: 44rpx;
	}

	.top_view_input {
		width: 70%;
	}

	.top_view_input_right {
		width: 108rpx;
		color: #0165FB;
		text-align: center;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 26rpx;
		font-weight: 400;
		height: 24rpx;
		line-height: 24rpx;
		border-left: 1rpx solid #DFDFDF;
	}

	.swiper-box {
		width: 100%;
		height: 280rpx;
		margin-top: 28rpx;
	}
	.swiper-box1{
		width: 100%;
		height: 244rpx;
		margin-top: 28rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
	}
	.swiper_img {
		width: 100%;
		height: 280rpx;
		background: #ccc;
		border-radius: 20rpx;
	}

	.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal {
		margin-bottom: 2rpx;
	}

	.swiper-box .wx-swiper-dot {
		display: inline-flex;
		height: 8rpx;
		width: 8rpx;
		/* margin-left: 20rpx; */
		justify-content: space-between;
	}

	.swiper-box .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(1, 101, 251, 0.20);
		/* border-radius: 8rpx */
	}

	.swiper-box .wx-swiper-dot-active {
		width: 18rpx;
	}

	.swiper-box .wx-swiper-dot-active::before {
		border-radius: 6rpx;
		background: #0165FB;
	}
	.swiper-box1 .wx-swiper-dot {
		display: inline-flex;
		height: 8rpx;
		width: 8rpx;
		/* margin-left: 20rpx; */
		justify-content: space-between;
	}
	.swiper-box1 .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background: rgba(1, 101, 251, 0.20);
		/* border-radius: 8rpx */
	}
	.swiper-box1 .wx-swiper-dot-active {
		width: 18rpx;
	}
	.swiper-box1 .wx-swiper-dot-active::before {
		border-radius: 6rpx;
		background: #0165FB;
	}

	.card1 {
		margin-top: 44rpx;
	}

	.card1_item {
		width: 334rpx;
		height: 116rpx;
		border-radius: 24rpx;
		background: #FFF;
		justify-content: center;
	}

	.card1_item_right {
		color: #333;
		font-family: Alibaba PuHuiTi 2.0;
		font-size: 32rpx;
		font-weight: 400;
	}

	.card1_item_left {
		width: 68rpx;
		height: 68rpx;
		margin-right: 20rpx;
	}

	.scroll {
		margin-top: 44rpx;
	}

	.list {
		margin-top: -24rpx;
	}
	.siwperBlock{
		display: flex;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
	}
	.siwperBlockItem{
		padding-top: 20rpx;
		padding-left: 28rpx;
	}
	.iconFont{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #000000;
		padding-top: 10rpx;
		text-align: center;
	}
	.askImg{
		position: fixed;
		z-index: 100000;
		bottom: 154rpx;
		right: 16rpx;
		width: 136rpx;
		height: 138rpx;
	}
	.askItem{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.askItemFont{
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: normal;
		font-size: 36rpx;
		color: #0165FB;
		padding-left: 4rpx;
	}
</style>